import { Button } from 'antd';
import type React from 'react';
import { useRef } from 'react';
import guangzhou from '@/components/MapView/boundaries/guangzhou.json';
import {
  attachBoundary,
  detachBoundary,
  getBoundary,
} from '@/components/MapView/Mapless/mana/boundary';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  function onShowBoundary(): void {
    const bm = attachBoundary(maplessRef.current, 'bm1');
    bm?.drawBoundary({ data: guangzhou as GeoJSON.FeatureCollection });
  }

  const showMaskRef = useRef<boolean>(true);
  function onToggleMask() {
    showMaskRef.current = !showMaskRef.current;
    const bm = getBoundary(maplessRef.current, 'bm1');
    bm?.toggleMask(showMaskRef.current);
  }

  function onToggleBoundary(): void {
    const bm = getBoundary(maplessRef.current, 'bm1');
    bm?.setVisible(!bm.IsVisible);
  }

  function onCloseBoundary(): void {
    detachBoundary(maplessRef.current, 'bm1');
  }

  function onFitBounds(): void {
    const bm = getBoundary(maplessRef.current, 'bm1');
    bm?.fitBounds();
  }

  return (
    <div className={styles.test}>
      <Button onClick={onShowBoundary}>绘制轮廓</Button>
      <Button onClick={onToggleBoundary}>显示/隐藏</Button>
      <Button onClick={onToggleMask}>显示/隐藏遮罩</Button>
      <Button onClick={onCloseBoundary}>关闭轮廓</Button>
      <Button onClick={onFitBounds}>FitBounds(轮廓)</Button>
    </div>
  );
};

export default Index;
